<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
  <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
  <script src="{$Think.config.httpFlag}{$Think.config.google_map_url}" async="async"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    .layui-upload-img{
      width: 100px;
    }
    .layui-form-item .layui-input-inline{
      width: 500px;
    }
  </style>
</head>
<body>
<div style="margin-top: 20px;">
</div>

<form class="layui-form" id="article">
  <div class="layui-form-item">
    <label class="layui-form-label">名称</label>
    <div class="layui-input-inline" style="position: relative">
      <input name="name" id="artchname" value="{notempty name='$menu'}{$menu.name}{/notempty}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
      <div class="addressbox"></div>
    </div>
  </div>
  <div id="map" style="width: 600px;height: 200px;margin: 10px 0;margin-left: 110px">

  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">地址</label>
    <div class="layui-input-inline">
      <input name="address" id="artaddress" value="{notempty name='$menu'}{$menu.address}{/notempty}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
    </div>
  </div>

  {if $groupid}
  <input type="hidden" name="groupid" value="{$groupid}">
  {/if}

  <input type="hidden" name="typeid" value="7">

  {notempty name="$menu"}
  <input type="hidden" name="id" value="{$menu.id}">
  {/notempty}

  <input type="hidden" name="lat" value="{notempty name='$menu'}{$menu.lat}{/notempty}">
  <input type="hidden" name="lng" value="{notempty name='$menu'}{$menu.lng}{/notempty}">

  <div class="layui-form-item">
    <label class="layui-form-label">联系方式</label>
    <div class="layui-input-inline">
      <textarea placeholder="请输入内容" class="layui-textarea" name="mobile">{notempty name='$menu'}{$menu.mobile}{/notempty}</textarea>
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">来源</label>
    <div class="layui-input-inline">
      <input name="source"  value="{notempty name='$menu'}{$menu.source}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">特别说明</label>
    <div class="layui-input-block" style="max-width: 500px">
      <textarea placeholder="请输入内容" class="layui-textarea" name="description">{notempty name='$menu'}{$menu.description}{/notempty}</textarea>
    </div>
  </div>

  <div class="layui-form-item" style="margin:0 110px ">
    <div class="layui-upload">
      <button type="button" class="layui-btn" id="upload1">图片上传</button>
      <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        预览图：
        <div class="layui-upload-list" id="seeupload1">
          {volist name="$thumb" id="vo"}
          {if !empty($vo)}
          <span class="uploadimgbox"><img class="layui-upload-img" src="{$vo}"><i class="layui-icon">&#x1006;</i></span>
          {/if}
          {/volist}
        </div>
      </blockquote>
    </div>
    <input id="upload-thumb1" type="hidden" name="thumb" value="{notempty name='$menu'}{$menu['thumb']}{/notempty}">
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="article">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>

</form>


<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>

<script>
  layui.use('upload', function(){
    var upload = layui.upload;
    //执行实例
    upload.render({
      elem: '#upload1'
      ,url: "{:url('common/upload')}"
      ,multiple: true
      ,done: function(res){
        //上传完毕回调
            layer.closeAll('loading');
        if(res.code == 2) {
          $('#seeupload1').append('<span class="uploadimgbox"><img class="layui-upload-img" src="'+res.src+'"><i class="layui-icon">&#x1006;</i></span>');
          $('#upload-thumb1').val($('#upload-thumb1').val()+","+res.src);
        } else {
          layer.msg(res.msg);
        }
      }
      ,error: function(){
        //请求异常回调
        layer.closeAll('loading');
            //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
      ,before:function () {
            layer.load(2);
        }
    });
  });

  $("#seeupload1").on("click",".layui-icon",function(){
    $(this).parent().remove();
    thumb("seeupload1",1);
  });

  function thumb(obj,n){
    var thumbs="";
    $("#"+obj).find("img").each(function(){
      var url=$(this).attr("src");
      thumbs+=","+url;
    });
    $("#upload-thumb"+n).val(thumbs);
  }

</script>
<script>
  layui.use(['layer', 'form'], function() {
    var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
    $(window).on('load', function() {
      form.on('submit(article)', function(data) {
        $.ajax({
          url:"{:url('admin/poi/addpoi')}",
          data:$('#article').serialize(),
          type:'post',
          async: false,
          success:function(res) {
            layer.msg(res.msg);
            if(res.code == 1) {
              setTimeout(function(){
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
              },1500)
            }
          }
        })
        return false;
      });

      //地图功能
      var geocoder;
      var map2;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var myOptions = {
          zoom : 10,//缩放比例
          //地图类型 •MapTypeId.ROADMAP •MapTypeId.SATELLITE
          //•MapTypeId.HYBRID •MapTypeId.TERRAIN
          center:new google.maps.LatLng({if !empty($menu.lat)}{$menu.lat}{else}39.90419989999999{/if}, {if !empty($menu.lat)}{$menu.lng}{else}116.40739630000007{/if}),
          mapTypeId : google.maps.MapTypeId.ROADMAP
        }
        map2 = new google.maps.Map(document.getElementById("map"),
                myOptions);
          marker.setMap(null);
          marker = new google.maps.Marker({
              map : map2,
              position :new google.maps.LatLng({if !empty($menu.lat)}{$menu.lat}{else}39.90419989999999{/if}, {if !empty($menu.lat)}{$menu.lng}{else}116.40739630000007{/if}),
          //坐标动画效果
          animation : google.maps.Animation.DROP
      });
          marker.setMap(map2);
        codeAddress();
      }
      var marker=new google.maps.Marker();
      function codeAddress(address) {

        //地址解析
        geocoder.geocode({
          'address' : address
        }, function(results, status) {
          console.log(results);
          if (status == google.maps.GeocoderStatus.OK) {
            //依据解析的经度纬度设置坐标居中

            map2.setCenter(results[0].geometry.location);
            marker = new google.maps.Marker({
              map : map2,
              position : results[0].geometry.location,
              title : address,
              //坐标动画效果
              animation : google.maps.Animation.DROP
            });

              $("input[name=lat]").val(results[0].geometry.location.lat);
              $("input[name=lng]").val(results[0].geometry.location.lng);
            marker.setMap(map2);

          } else {
            //alert("Geocode was not successful for the following reason: " + status);
          }
        });
      }

      function Address(obj) {
        var address = document.getElementById(obj).value;
        var addressbox="";
        //地址解析
        geocoder.geocode({
          'address' : address
        }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            for(var i in results){
              if(i>4){
                break;
              }
              addressbox+="<span>"+results[i].formatted_address+"</span>";
            }
            $(".addressbox").html(addressbox);
          } else {
          }
        });
      }


      initialize();

      //机场
      $("#artchname").on("input",function(){
        $(".addressbox").html("");
        Address("artchname");
      });

      $("#article .addressbox").on("click","span",function(){
        marker.setMap(null);
        $("#artaddress").val($(this).html());
        codeAddress($(this).html());
      });

      $("body").on("click",function(){
        $(".addressbox").html("");
      })
    });
  });
</script>
</body>
</html>
